<style scoped lang="scss" type="text/scss">
  @import '~variables';

  /deep/ .bg{
    background-image: url("./../assets/images/login/bg4.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 100%;
  }
  .main-box{
    width: 500px;
    height: 350px;
    margin: 10% auto;

    /deep/ .ivu-card-body {
      padding: 0;
    }
    /deep/ .ivu-tabs-bar{
      border-bottom: 0 none;

      /deep/ .ivu-tabs-tab{
        border: 0 none;
      }
      /deep/ .ivu-tabs-nav-container{
        height: 50px;

        .ivu-tabs-nav{
          height: 50px;
          line-height: 50px;
          display: flex;
          width: 100%;

          .ivu-tabs-tab{
            flex: 1;
            text-align: center;
            height: 50px;
            margin-right: 0;
            font-size: $font-size-l;
            line-height: 50px;
            padding: 0;
          }
        }
        .ivu-tabs-tab-active{
          height: 50px;
        }
      }
    }
  }
  /deep/ .ivu-input-icon{
    right: inherit;
    left: 0;
    line-height: 45px;
  }
  /deep/ .ivu-input-icon-normal+.ivu-input{
    padding-left: 30px;
  }
  /deep/ .ivu-input{
    height: 45px;
  }
  .confirm-btn{
    height: 45px;
  }
  .regs{
    /deep/ .ivu-input{
      height: auto;
    }
    /deep/ .confirm-btn{
      height: 36px!important;
    }
    /deep/ .ivu-form-item{
      margin-bottom: $m;
    }
    /deep/ .ivu-form-item-error-tip{
      padding-top: 1px;
    }
  }

  @media screen and (min-width: 320px) and (max-width: 768px){
    .main-box{
      width: auto;
      margin-left: $l;
      margin-right: $l;
    }
    .logo{
      padding-left: 0!important;
      text-align: center;
    }
  }
</style>

<template>
  <div>
    <div class="logo padding-top-xl padding-left-xxl">
      <img src="@/assets/images/logo.png" alt="">
    </div>

    <div class="main">
      <div>
        <Card class="main-box">
          <Tabs type="card" v-model="loginTab">
            <TabPane label="登录" name="l"></TabPane>
            <TabPane label="注册" name="r"></TabPane>
          </Tabs>

          <div class="padding-left-xxl padding-right-xxl padding-top">
            <!--登录-->
            <div v-if="loginTab === 'l'">
              <Form :model="loginForm" ref="loginForm" :rules="loginRule">
                <FormItem prop="loginName">
                  <Input size="large" v-model="loginForm.loginName" placeholder="请输入账号" icon="ivu-icon ivu-icon-person"></Input>
                </FormItem>
                <FormItem prop="loginPwd">
                  <Input size="large" type="password" v-model="loginForm.loginPwd" placeholder="请输入密码" icon="ivu-icon ivu-icon-locked"></Input>
                </FormItem>
              </Form>
            </div>

            <!--注册-->
            <div v-if="loginTab === 'r'" class="regs">
              <Form :model="regsForm" ref="regsForm" :rules="regsRule">
                <FormItem prop="nickName">
                  <Input size="large" v-model="regsForm.nickName" placeholder="请输入昵称"></Input>
                </FormItem>
                <FormItem prop="userName">
                  <Input size="large" v-model="regsForm.userName" placeholder="请输入账号"></Input>
                </FormItem>
                <FormItem prop="userPwd">
                  <Input size="large" type="password" v-model="regsForm.userPwd" placeholder="请输入密码"></Input>
                </FormItem>
                <FormItem prop="confirmPwd">
                  <Input size="large" type="password" v-model="regsForm.confirmPwd" placeholder="请确认密码"></Input>
                </FormItem>
              </Form>
            </div>
          </div>

          <div class="margin-top-xl padding-left-xxl padding-right-xxl" v-if="loginTab === 'l'">
            <Button type="primary" size="large" class="confirm-btn" long @click="logins('loginForm')">登录</Button>
          </div>
          <div class="margin-top-l padding-left-xxl padding-right-xxl" v-else>
            <Button type="primary" size="large" class="confirm-btn" long @click="regster('regsForm')">注册</Button>
          </div>
        </Card>
      </div>
    </div>
  </div>
</template>

<script>
  import bg from '@/assets/images/login/bg2.jpg'

  export default {
    name: '',
    data () {
      let confirmPwd = (rule,value,callback) => {
        if (value === this.regsForm.userPwd){
          callback()
        } else {
          callback(new Error('两次输入的密码不一致'))
        }
      }
      return {
        loginTab: 'l',
        loginForm: {
          loginName: '',
          loginPwd: ''
        },
        loginRule: {
          loginName: [{ required: true,message: '请输入账号',trigger: 'change' }],
          loginPwd: [{ required: true,message: '请输入密码',trigger: 'change' }]
        },
        regsForm: {
          nickName: '',
          userName: '',
          userPwd: '',
          confirmPwd: ''
        },
        regsRule: {
          nickName: [{ required: true,message: '请输入昵称',trigger: 'change' }],
          userName: [{ required: true,message: '请输入账号',trigger: 'change' }],
          userPwd: [{ required: true,message: '请输入密码',trigger: 'change' }],
          confirmPwd: [{ required: true,validator: confirmPwd,trigger: 'change' }]
        }
      }
    },
    created () {
      if (this.$route.query.code){
        this.loginTab = this.$route.query.code
      }
    },
    mounted () {
      let body = document.body.style
      if (this.$route.path === '/login') {
        body.backgroundRepeat = 'no-repeat'
        body.backgroundPosition = 'center'
        body.backgroundImage = `url(${bg})`
        body.backgroundSize = 'cover'
      } else {
        body.backgroundImage = ''
      }
    },
    beforeDestroy () {
      document.body.style.backgroundImage = ''
    },
    methods: {
      // 登录
      logins (formName) {
        this.$refs[formName].validate((valid) => {
          if (valid){
            this.$http.post('/api/auth/login',{
              username: this.loginForm.loginName,
              password: this.loginForm.loginPwd
            })
              .then(() => {
//                if (res.status) {
                  this.$Message.success('登录成功')
                  sessionStorage.setItem('userName',this.loginForm.loginName)
                  setTimeout(() => {
                    this.$router.go(-1)
                  },500)
//                }
              })
          }
        })
      },
      // 注册
      regster(formName){
        this.$refs[formName].validate((valid) => {
          if (valid){
            this.$http.post('/api/auth/register',{
              username: this.regsForm.userName,
              password: this.regsForm.userPwd,
              nickname: this.regsForm.nickName
            })
              .then(() => {
//                console.log(res)
//                if (res.status){
                  this.$Message.success('注册成功')
                  sessionStorage.setItem('userName',this.regsForm.userName)
                  setTimeout(() => {
                    this.$router.go(-1)
                  },500)
//                }
              })
          }
        })
      }
    }
  }
</script>
